<!--
 * @Author: [you name]
 * @Date: 2021-11-20 10:19:00
 * @LastEditors: [you name]
 * @LastEditTime: 2021-11-20 11:26:41
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue3-admin\src\components\Tranfer.vue
-->
<template>
  <div class="tranfer">
    <div class="left">
      <p>{{leftInfo.title}}({{leftList.length}})</p>
      <el-input
        size="mini"
        v-model.trim="leftSearchInfo"
        @input="searchLeft"
        placeholder="请输入搜索条件"
        clearable
      >
        <template #prefix>
          <el-icon @click="searchLeft"><search /></el-icon>
        </template>
      </el-input>
      <el-scrollbar>
        <ul ref="ulL">
          <li v-for="(item, index) in leftList" @dblclick="leftItemClick(item.id, index)" :key="item.id" :class="{disabled:item.disabled}">
            <slot name="leftItem" :item="item"></slot>
            <!-- <span style="margin-right: 10px;">
              <span class="inlineBlock" :style="{minWidth: NameWidth + 'px'}">{{item.name}}</span>
            </span>
            <span style="margin-right: 10px;">
              <span class="inlineBlock" :style="{minWidth: CharactorWidth + 'px'}">{{item.roleName}}</span>
            </span>
            <span style="text-align: right;" class="inlineBlock">
              <i v-if="item.isauthor">我自己</i>
              <i v-if="item.isleader">负责人</i>
            </span>
            <span style="text-align: right; padding-left: 10px">
              <el-icon class="el-icon-check" @click.stop="itemClick(item.userId)"><check /></el-icon>
            </span> -->
          </li>
        </ul>
      </el-scrollbar>
    </div>
    <div class="right">
      <p>{{rightInfo.title}}({{rightList.length}})</p>
      <el-input
        size="mini"
        v-model.trim="rightSearchInfo"
        @input="searchRight"
        placeholder="请输入搜索条件"
        clearable
      >
        <template #prefix>
          <el-icon @click="searchRight"><search /></el-icon>
        </template>
      </el-input>
      <el-scrollbar>
        <ul ref="ulR">
           <li v-for="(item, index) in leftList" @dblclick="rightItemClick(item.id, index)" :key="item.id" :class="{disabled:item.disabled}">
            <slot name="rightItem" :item="item"></slot>
            <!-- <span style="margin-right: 10px;">
              <span class="inlineBlock" :style="{minWidth: NameWidth + 'px'}">{{item.name}}</span>
            </span>
            <span style="margin-right: 10px;">
              <span class="inlineBlock" :style="{minWidth: CharactorWidth + 'px'}">{{item.roleName}}</span>
            </span>
            <span style="text-align: right;" class="inlineBlock">
              <i v-if="item.isauthor">我自己</i>
              <i v-if="item.isleader">负责人</i>
            </span>
            <span style="text-align: right; padding-left: 10px">
              <el-icon class="el-icon-close" @click="itemClick(item.userId)"><close /></el-icon>
            </span> -->
          </li>
        </ul>
      </el-scrollbar>
      <span class="footer">
        <el-button size="small" @click="handleCancel">取 消</el-button>
        <el-button size="small" type="primary" @click="handleSave">保 存</el-button>
      </span>
    </div>  
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, toRefs, ref } from 'vue'
import { Check, Close } from "@element-plus/icons"
import TextOverflow3 from '@/components/TextOverflow3.vue'
export default defineComponent({
  components: { TextOverflow3, Check, Close },
  props: {
    leftInfo: {
      type: Object,
      default: {
        title: '左边数据',
        list: [{
          id: 1,
          name: '张三',
          roleName: '管理员',
          disabled: false,
        },
        {
          id: 2,
          name: '李四',
          roleName: '管理员',
          disabled: false,
        },
        {
          id: 3,
          name: '王五',
          roleName: '管理员',
          disabled: false,
        }],
        showSearch: true,
      },
    },
    rightInfo: {
      type: Object,
      default: {
        title: '右边数据',
        list: [{
          id: 4,
          name: '马六',
          roleName: '管理员',
          disabled: false,
        },
        {
          id: 5,
          name: '狗七',
          roleName: '管理员',
          disabled: false,
        },
        {
          id: 6,
          name: '田八',
          roleName: '管理员',
          disabled: false,
        }],
        showSearch: true,
      },
    }
  },
  setup (props,context) {
    const state = reactive({
      leftList: props.leftInfo.list,
      searchLeftData: props.leftInfo.list,
      rightList: props.rightInfo.list,
      searchRightData: props.rightInfo.list,
      leftSearchInfo: '',
      rightSearchInfo: '',
    })

    const ulR = ref(null)
    const ulL = ref(null)

    // 左边子项点击事件
    const leftItemClick = (id:any, index:number)=> {
      let clickitem = state.leftList.find((item:any)=>{
        return item.id == id;
      })
      state.leftList.splice(index,1);
      state.rightList.push(clickitem);
    }

    // 右边子项点击事件
    const rightItemClick = (id:any, index:number)=> {
      let clickitem = state.rightList.find((item:any)=>{
        return item.id == id;
      })
      state.rightList.splice(index,1);
      state.leftList.push(clickitem);
    }

    // 取消
    const handleCancel = ()=> {
      state.leftSearchInfo = '';
      state.rightSearchInfo = '';
      state.leftList = props.leftInfo.list;
      state.rightList = props.rightInfo.list;
    }

    // 确认
    const handleSave = ()=> {
      context.emit('handleSave',state.leftList,state.rightList)
    }

    // 左边搜索
    const searchLeft = ()=> {
      searchLeftData
    }
    
    // 右边搜索
    const searchRight = ()=> {
      context.emit('handleSave',state.leftList,state.rightList)
    }

    return {
      ...toRefs(state),
      ulR,
      ulL,
      handleCancel,
      handleSave,
      leftItemClick,
      rightItemClick,
      searchLeft,
      searchRight
    }
  }
})
</script>

<style lang="scss" scoped>
  .tranfer {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    .member {
      display: flex;
      margin-top: 48px;
      height: 600px;
      min-width: 800px;
      border-radius: 4px;
      border: 2px solid #E8E8E8;
      background-color: #FAFAFB;
      font-size: 14px;
      color: #333;
      overflow: auto;
      
      .inlineBlock {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .left {
        flex: 1;
        height: 100%;
        margin-right: 8px;
        background-color: #fff;
        p {
          padding: 40px 0 8px 19px;
          margin-bottom: 8px;
          border-bottom: 2px solid #f3f3f3;
          font-size: 14px;
          font-family: 'PingFangSC-Regular', 'PingFang SC';
          font-weight: 400;
          color: #333333;
          line-height: 20px;
          user-select: none;
        }
        .el-input {
          margin: 32px 18px 16px 16px;
          width: 360px;
          user-select: none;
        }
        .el-scrollbar {
          height: calc(100% - 80px);
        }
        ul {
          li {
            padding: 5px 34px 5px 30px;
            cursor: pointer;
            white-space: nowrap;
            &:hover {
              background-color: rgba(64, 145, 253, 0.2);
              span {
                .el-icon-check {
                  display: inline-block;
                  opacity: 1;
                  min-width: 16px;
                  color: #4091FD;
                }
              }
            }
            &.disabled {
              pointer-events: none;
              background-color: #F9FAFA;
              cursor: not-allowed;
              span {
                .el-icon-check {
                  opacity: 1;
                  color: #d9d9d9;
                }
              }
            }
            &.modifyright {
              pointer-events: none;
              span {
                .el-icon-check {
                  opacity: 0;
                  color: #d9d9d9;
                }
              }
            }
            &.isPlaceOnFile {
              display: flex;
              pointer-events: none;
              background-color: #fff;
              span {
                user-select: none;
                &:nth-child(3) {
                  flex: 1;
                }
              }
            }
            span {
              user-select: none;
              &:nth-child(3) {
                min-width: 100px;
              }
              &:nth-child(4) {
                min-width: 32px;
              }
              i {
                display: inline-block;
                padding: 0 6px;
                margin-right: 2px;
                font-style: normal;
                font-size: 12px;
                line-height: 20px;
                background: #d9d9d9;
                border-radius:4px;
              }
              .el-icon-check {
                display: inline-block;
                opacity: 0;
                background-color: rgba(0,0,0,0);
                font-size: 18px;
                color: rgba($color: #000, $alpha: 0.25);
              }
            }
          }
        }
      }
      
      .right {
        flex: 1;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        p {
          padding: 40px 0 17px 16px;
          user-select: none;
        }
        ul {
          flex: 1;
          li {
            padding: 5px 34px 5px 30px;
            white-space: nowrap;
            &:hover {
              background-color: rgba(64, 145, 253, 0.2);
              span {
                .el-icon-close {
                  color: #4091FD;
                  opacity: 1;
                }
              }
            }
            &.disabled {
              pointer-events: none;
              background-color: #F9FAFA;
              span {
                .el-icon-close {
                  display: inline-block;
                  opacity: 0;
                }
              }
            }
            &.modifyright {
              pointer-events: none;
              span {
                .el-icon-check {
                  opacity: 0;
                }
              }
            }
            span {
              user-select: none;
              &:nth-child(3) {
                min-width: 96px;
              }
              &:nth-child(4) {
                min-width: 32px;
              }
              i {
                display: inline-block;
                padding: 0 6px;
                margin-right: 2px;
                font-style: normal;
                font-size: 12px;
                line-height: 20px;
                background: #d9d9d9;
                border-radius:4px;
              }
              .el-icon-close {
                opacity: 0;
                cursor: pointer;
                background-color: rgba(0,0,0,0);
                font-size: 18px;
                color: rgba($color: #000, $alpha: 0.25);
              }
            }
          }
        }
        .footer {
          height: 60px;
          text-align: right;
          .el-button {
            width: 65px;
            height: 32px;
            &:nth-child(2) {
              margin-right: 25px;
              margin-left: 16px;
            }
          }
        }
      }     
    }
  }
</style>
